<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菜单变色</title>
	<style type="text/css">
	*{padding:0px;margin:0px;list-style:none;text-decoration:none;}
	li{width:100px;height:30px;border:solid 1px green;
		float:left; text-align:center;line-height:30px;margin-right:10px;
				
		}
	.cur{width:150px; background: pink;};
	</style>	
</head>
<body>
	<ul>
		<li><a href="">军事</a></li>
		<li><a href="">科技</a></li>
		<li><a href="">汽车</a></li>
		<li><a href="">体育</a></li>
		<li><a href="">生活</a></li>
	</ul>
	<script type="text/javascript">
	//获取元素
	var lis = document.getElementsByTagName('li');

	for(var  i= 0; i< lis.length; i++){
		//鼠标放上去的事件
		console.log(lis[i]);
		lis[i].onmouseover =function()
		{
			this.className ='cur';
		}

		//鼠标离开的事件
		lis[i].onmouseout =function()
		{
			this.className ='';
		}
	}

	</script>
</body>
</html>